<!-- 上传图片组件 -->
<template>
  <div>
    <!-- show-file-list -- 是否展示列表设置为false不展示自带的文件列表 -->
    <!-- on-success -- 文件上传成功时返回的数据 -->
    <!-- before-upload -- 文件上传前做的一些验证 -->
    <!-- http-request -- 自定义上传方法 -->
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="clay"
      :auto-upload="true"
    >
      <div v-if="imageUrl" class="box">
        <img :src="imageUrl" class="avatar clay-img" />
        <div class="clay-mask">
          <i class="el-icon-delete del" @click.stop="delImg"></i>
        </div>
      </div>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
/**
 * file -- 文件
 * 文件转base64 -- 解释不清,这是一些固定方法,用就行了
 */
function uploadImgToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      // 图片转base64完成后返回reader对象
      resolve(reader);
    };
    reader.onerror = reject;
  });
}
export default {
  props: {
    // 图片
    clay_img: {
      type: String,
      default: '',
    },
  },
  //如果有图片就赋值页面
  watch:{
    clay_img(newVal,oldVal){
      this.imageUrl=newVal
      this.clay_emit(newVal)
    },
  },
  data() {
    return {
      imageUrl: "", //上传成功后返回的图片路径
    };
  },
  methods: {
    delImg(){
this.clay_emit('')
this.imgUrl=''
},
    /**
     * val--值
     * 传递给父组件--提交时用的
     */
    clay_emit(val) {
      this.$emit("clay_emit", val);
    },
    /**
     * 文件上传自定义 params自带的
     */
    clay(params) {
      let file = params.file;
      let that = this;
      // 调用上面的文件转base64方法
      uploadImgToBase64(file).then((resImg) => {
        let data = {
          baseUserHead: resImg.result,
        };
        // 调用上传文件接口
        that.$http.post("/admin/upLoadUserHead", data).then((res) => {
          // that.clay_emit(res)
        });
      });
    },
    // 文件上传成功后显示到页面
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 文件上传时做的一些操作--别问,问就看代码一个一个console.log()
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style scoped>
div >>> .avatar-uploader {
  display: flex;
}
div >>> .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  height: 120px;
  width: 120px;
  /* position: relative;
  overflow: hidden; */
}
div >>> .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
div >>> .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
div >>> .clay-img {
  width: 120px;
  height: 120px;
  border-radius: 6px;
}
.box {
  position: relative;
}
div >>> .clay-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  cursor: pointer;
  color: #fff;
  opacity: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s;
}
.clay-mask:hover {
  opacity: 1;
}
div >>> .del {
  position: absolute;
  font-size: 30px;
  left: 40%;
  top: 38%;
}
</style>